<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>部门补助标准</title> 
    <script src="./js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="./font/bootstrap.min.css">  
    <style> 
        body { 
            padding: 20px; 
        } 
        table { 
            width: 100%; 
            margin-top: 20px; 
            border-collapse: collapse; 
        } 
        th, td { 
            max-width：100px；
            padding: 10px; 
            border: 1px solid #ddd; 
            text-align: left; 
        } 
        th { 
            background-color: #f2f2f2; 
        } 
        .edit-btn { 
            cursor: pointer; 
        } 
        .yellow{
            color:#ff5e00;
        }
        .green{
            color:green;
        }
        .red{
            color:red;
        }
        
        #data-table thead tr { 
            position: sticky; 
            top: 0; 
            background-color: white; /* 设置背景色以避免透明问题 */ 
        } 
        #data-table { 
            width: 100%; 
            border-collapse: collapse; 
        } 
    </style> 
</head> 
<body> 
    <table id="data-table"> 
        <thead> 
            <tr></tr> 
        </thead> 
        <tbody> 
        </tbody> 
    </table> 
 
    <script>
    $.ajaxSetup({contentType:"application/json;charset=gb2312"}); 
        
    function json2table(jsonData){                
        // 渲染表头 
        var tableHead = $('#data-table thead tr'); 
        $.each(jsonData[0], function(key) { 
            tableHead.append('<th>'  + key + '</th>'); 
        }); 
        tableHead.append('<th>操作</th>');  

        // 渲染表格内容 
        var tableBody = $('#data-table tbody'); 
        $.each(jsonData, function(index, item) { 
            var row = $('<tr>'); 
            $.each(item, function(key, value) { 
                row.append('<td>'  + value + '</td>'); 
            }); 
            row.append('<td><button  class="btn btn-info edit-btn">编辑</button></td>'); 
            tableBody.append(row);  
        });                
    }
            
    // 编辑按钮点击事件 
    function btn_click() { 
        var row = $(this).closest('tr').find('td'); 
        if( $(this).hasClass("edit-btn") ){//编辑按钮
            row.each(function(index)  { 
                if (index > 1 && index < row.length  - 1) { // 排除最后一列的按钮 
                    var cellText = $(this).text(); 
                    $(this).html('<input type="text" value="' + cellText + '">'); 
                } 
            }); 
            $(this).text('保存').removeClass("edit-btn").addClass("save-btn")                     
        }else if( $(this).hasClass("save-btn") ){//保存按钮
            row.find('input').each(function(index)  { 
                    $(this).parent().text( $(this).val() );  
            }); 
            
            var updatedData = {};
            var key = $("thead").find('th'); 
            row.each(function(index)  {
                if ( index < row.length  - 1)
                    updatedData[ (key[index].textContent) ] =  ($(row[index]).text());
            })
            $(this).closest('tr').removeClass("green").removeClass("red").addClass("yellow");
            // 提交更新到服务器 
             saveData(updatedData,$(this));
              
            $(this).text('编辑').removeClass("save-btn").addClass("edit-btn");    
        }else{
            console.log("error")
        } 
    }
    //保存数据更新
    function saveData(updatedData, that){
        $.get("deptUpdata.asp",updatedData, function(jsonData){
            var jsonData = JSON.parse((jsonData))
            if(jsonData.code == 200 ) {
                that.closest('tr').removeClass("yellow").removeClass("red").addClass("green");                jsonData=(jsonData.data)
                that.closest('tr').html("<td>" + jsonData.ID +"</td>"+
                                        "<td>" + jsonData.部门名称 +"</td>"+
                                        "<td>" + jsonData.早餐补贴金额 +"</td>"+
                                        "<td>" + jsonData.午餐补贴金额 +"</td>"+
                                        "<td>" + jsonData.晚餐补贴金额 +"</td>"+
                                        "<td>" + jsonData.夜宵补贴金额 +"</td>"+
                                        '<td><button  class="btn btn-info edit-btn">编辑</button></td>'
                )
            }else{
                that.closest('tr').removeClass("yellow").removeClass("green").addClass("red");
            }
            console.log(that.closest('tr'));
        });
    }        
    // 模拟从服务器获取JSON数据 
    $.getJSON("dept.asp",function(jsonData){
         json2table(jsonData.data) 
    });
    //json2table(jsonData);
    $('#data-table').on('click', '.btn-info', btn_click); 
            
    </script> 
</body> 
</html> 